<template>
  <div class="box">
    <div class="main">
      <!-- 检索 -->
      <div class="s-box">
        <div class="search-box">
          <el-input
            placeholder="请输入关键词"
            v-model="opts.searchTxt"
            class="search-inp"
            @keydown.enter.native="handleSearch"
          >
            <div slot="prefix">
              <el-dropdown
                placement="top"
                trigger="click"
                @command="handleCommand">
                <span class="el-dropdown-link">{{curSType}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="综合">综合</el-dropdown-item>
                  <el-dropdown-item command="专利">专利</el-dropdown-item>
                  <el-dropdown-item command="文献">文献</el-dropdown-item>
                  <el-dropdown-item command="成果">成果</el-dropdown-item>
                  <el-dropdown-item command="项目">项目</el-dropdown-item>
                  <el-dropdown-item command="标准">标准</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-input>
          <el-button type="primary" class="search-btn2" @click="handleSearch">检索</el-button>
        </div>
      </div>
      <!-- 高级检索 -->
      <div v-show="showAdvancedPanel" class="advanced-search-box">
        <ul>
          <li>
            <span class="tit">包含精确检索词：</span>
            <el-input v-model="opts.accurateSearch" class="elinp" placeholder="多个检索词以逗号，分隔" @keydown.enter.native="handleAdvancedSearch"></el-input>
          </li>
          <li>
            <span class="tit">包含至少一个检索词：</span>
            <el-input v-model="opts.includeSearch" class="elinp" placeholder="多个检索词以逗号，分隔" @keydown.enter.native="handleAdvancedSearch"></el-input>
          </li>
          <li>
            <span class="tit">不包含检索词：</span>
            <el-input v-model="opts.notIncludeSearch" class="elinp" placeholder="多个检索词以逗号，分隔" @keydown.enter.native="handleAdvancedSearch"></el-input>
          </li>
        </ul>
        <div class="btn-box">
          <el-button type="primary" class="elbtn" @click="handleAdvancedSearch">高级搜索</el-button>
        </div>
        <div class="tools">
          <p class="fold" @click="showAdvancedPanel=false">
            <span>收起</span><i class="el-icon-caret-top"></i>
          </p>
        </div>
      </div>
      <template v-if="curType==='综合'">
        <Overview ref="overview" @keyword="getOverviewKey"/>
      </template>
      <template v-else>
        <!-- 检索 -->
        <div class="result">
          <!-- 子项 -->
          <CItem ref="cItem" :curType="curType"/>
          <!-- 结果 -->
          <div class="result-panel">
            <div class="top">
              <p class="total">找到约{{resultTotal}}条相关结果</p>
              <div class="tools">
                <p class="sort" @click="handleSort">
                  <span>按时间排序</span>
                  <i class="iconfont icon-paixu-daoxu reverse" :class="{highlight: opts.sort===1}"></i>
                  <i class="iconfont icon-paixu-daoxu" :class="{highlight: opts.sort===2}"></i>
                </p>
                <p class="report-btn" :class="{disabled: downloading, gray: curType!=='专利'}" @click="downloadReport">
                  <i v-show="downloading" class="el-icon-loading"></i>
                  <span>一键报告</span>
                </p>
              </div>
            </div>
            <template v-if="curType==='专利'">
              <Patent ref="patent" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='文献'">
              <Literature ref="literature" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='成果'">
              <Achievement ref="achievement" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='标准'">
              <Standard ref="standard" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='企业'">
              <Enterprise ref="enterprise" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='人才'">
              <Talent ref="talent" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='政策'">
              <Policy ref="policy" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='资讯'">
              <Information ref="information" @resultTotal="getResultTotal"/>
            </template>
            <template v-if="curType==='项目'">
              <Project ref="project" @resultTotal="getResultTotal"/>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Overview from './Overview'
import Patent from './Patent'
import Literature from './Literature'
import Achievement from './Achievement'
import Standard from './Standard'
import Enterprise from './Enterprise'
import Talent from './Talent'
import Policy from './Policy'
import Information from './Information'
import Project from './Project'
export default {
  components: {
    Overview,
    Patent,
    Literature,
    Achievement,
    Standard,
    Enterprise,
    Talent,
    Policy,
    Information,
    Project
  },
  computed:{
    ...mapState(['IRkeyword', 'facetParams']),
  },
  data() {
    return {
      menuList: [],
      isMenuFold: false, // 左侧菜单折叠
      curType: '综合',
      curSType: '综合',
      showAdvancedPanel: false,
      opts: {
        searchTxt: '',
        ipi: 1,
        ips: 10,
        sort: -1, // 排序  1 倒序 DESC ，2 正序 ASC
        accurateSearch: '',
        includeSearch: '',
        notIncludeSearch: '',
        advanced: false, // 高级检索
        resetFacet: true, // 是否需要重置分面，即左侧的二级聚类
      },
      scrollOps: {
        vuescroll: {
          mode: 'native'
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: 'rgba(255,255,255,.1)',
          gutterOfEnds: '10px'
        },
        bar: {
          background: '#eee',
          size: '5px'
        }
      },
      resultTotal: '', //结果条数
      downloading: false
    }
  },
  watch: {
    '$route'(newVal, oldVal) {
        this.search()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.menuList = [
        {name: '综合', icon: 'icon-zongheguanli'},
        {name: '专利', icon: 'icon-zhuanli'},
        {name: '文献', icon: 'icon-tushuguan'},
        {name: '成果', icon: 'icon-zongguichengguo'},
        {name: '标准', icon: 'icon-biaozhun-copy-copy'},
        {name: '企业', icon: 'icon-qiye'},
        {name: '人才', icon: 'icon-rencai'},
        {name: '政策', icon: 'icon-zhengcejiedu'},
        {name: '资讯', icon: 'icon--nav-zixun'},
        {name: '项目', icon: 'icon-zongguichengguo'},
      ]
      
      let query = this.$route.query
      if (query) {
        if (query.keyword) {
          this.opts.searchTxt = query.keyword
        }
        let type = query.type || 0
        this.curType = this.menuList[Number(type)].name
      }
      this.search(false)
      
      // this.$refs.cItem.init(this.curType)
    },
    search() {
      this.$store.commit('setIRkeyword', this.opts.searchTxt)
      this.resultTotal = ''
      if (this.curType === '综合') {
        this.$nextTick(() => {
          this.$refs.overview.init(this.opts)
        })
      } else if (this.curType === '专利') {
        this.$nextTick(() => {
          // this.$refs.patent.init(this.opts)
        })
      } else if (this.curType === '文献') {
        this.$nextTick(() => {
          // this.$refs.literature.init(this.opts)

        })
      } else if (this.curType === '成果') {
        this.$nextTick(() => {
          // this.$refs.achievement.init(this.opts)
        })
      } else if (this.curType === '项目') {
        this.$nextTick(() => {
          // this.$refs.standard.init(this.opts)
        })
      } else if (this.curType === '标准') {
        this.$nextTick(() => {
          // this.$refs.standard.init(this.opts)
        })
      } 
    },
    handleSearch() {
      if(this.opts.searchTxt == ''){
        this.$message.warning('请输入要查询的内容')
        return
      }
      this.$set(this.opts, 'sort', -1)
      this.$set(this.opts, 'resetFacet', true)
      // 重置智能检索分面聚合参数
      this.$store.commit('setFacetParams', {})
      let query = this.$route.query
      let curTypeIndex = this.menuList.findIndex(v => v.name === this.curType)
      if ((query.keyword === this.opts.searchTxt) && (query.type == curTypeIndex)) {
        this.search()
      } else {
        this.$router.push({
          name: 'IRSearchResult',
          query: {
            keyword: this.opts.searchTxt,
            type: this.menuList.findIndex(v => v.name === this.curType)
          }
        })
      }
      //  else if (this.curType === '政策') {
      //   this.$nextTick(() => {
      //     this.$refs.policy.init(this.opts)
      //   })
      // } else if (this.curType === '资讯') {
      //   this.$nextTick(() => {
      //     this.$refs.information.init(this.opts)
      //   })
      // } else if (this.curType === '项目') {
      //   this.$nextTick(() => {
      //     this.$refs.project.init(this.opts)
      //   })
      // }
    },
    handleCommand(e) {
      this.curSType = e
      this.curType = e
    },
    // 切换左侧菜单栏
    handleChangeMenuFold() {
      this.isMenuFold = !this.isMenuFold
    },
    // getOverviewKey(data) {
    //   this.opts.searchTxt = data
    //   this.$router.push({
    //     name: 'IRSearchResult',
    //     query: {
    //       keyword: this.opts.searchTxt,
    //       type: this.menuList.findIndex(v => v.name === this.curType)
    //     }
    //   })
    // },
  },
}
</script>

<style lang="scss" scoped>
.el-dropdown-link{
  cursor: pointer;
}
.box {
  position: relative;
  display: flex;
  min-height: calc(100vh - .7rem);
  padding: .24rem .28rem;
  box-sizing: border-box;
  background-color: $color46;
  .menu {
    position: fixed;
    top: .7rem;
    left: 0;
    z-index: 3;
    width: 1.02rem;
    height: calc(100vh - .7rem);
    padding-top: .16rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: $color2;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .2s linear;
    // 展开
    // &:hover 
    &.menu-fold {
      width: 1.6rem;
      h5 {
        .circle, span {
          display: inline-block;
        }
      }
      .menu-list {
        li {
          padding: 0 .18rem 0 .66rem;
          .logo {
            position: absolute;
            top: 50%;
            left: .15rem;
            margin-top: -.18rem;
          }
          span {
            display: inline-block;
          }
        }
      }
    }
    h5 {
      width: 1.6rem;
      height: .4rem;
      line-height: .4rem;
      margin-bottom: .1rem;
      font-size: .16rem;
      font-weight: normal;
      text-align: center;
      text-indent: -.09rem;
      color: $color47;
      span {
        display: none;
        vertical-align: middle;
      }
    }
  
  }
  .main {
    position: relative;
    width: 100%;
    .s-box {
      position: relative;
      margin-bottom: .24rem;
      .search-box {
        position: relative;
        display: flex;
        align-items: center;
        .advanced-box {
          position: relative;
          display: inline-block;
          z-index: 3;
          height: .4rem;
          line-height: .4rem;
          margin-right: .2rem;
          .advanced-btn {
            // font-family: SourceHanSansCN-Medium;
            font-size: .16rem;
            color: $mainColor;
            cursor: pointer;
            span {
              display: inline-block;
              margin-right: .02rem;
            }
          }
        }
        .search-inp {
          width: 7.7rem;
          height: .4rem;
          margin-right: .14rem;
          vertical-align: middle;
          background-color: $color2;
          ::v-deep {
            ::placeholder {
              color: $color49 !important;
              // color: red !important;
            }
            .el-input__inner {
              height: .4rem;
              line-height: .4rem;
              padding-left: .79rem;
              padding-right: .15rem;
              border-color: $mainColor;
              border-radius: 6px;
              // font-family: SourceHanSansCN-Regular;
              font-size: .14rem;
              color: $color49;
              background-color: transparent;
            }
            .el-input__prefix {
              position: absolute;
              top: 0;
              left: 0;
              width: .7rem;
              line-height: .38rem;
              font-size: .18rem;
              color: $mainColor;
              &:after {
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: .32rem;
                margin-top: -.16rem;
                background-color: $color50;
                content: '';
              }
            }
            .el-input__prefix2 {
              position: relative;
              width: .64rem;
              padding: 0;
              border-color: $mainColor;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
              box-sizing: border-box;
              text-align: center;
              background-color: transparent;
              // cursor: pointer;
              .search-btn {
                display: block;
                width: 100%;
                text-align: center;
                font-size: .14rem;
                font-weight: bold;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
        .search-btn2 {
          width: .96rem;
          height: .4rem;
          padding: 0;
          border-color: $mainColor;
          border-radius: 6px;
          box-sizing: border-box;
          // font-family: SourceHanSansCN-Regular;
          font-size: .16rem;
          font-weight: bold;
          letter-spacing: 1px;
          color: $color17;
          vertical-align: middle;
          background-color: $mainColor;
          &:hover {
            background-color: rgba(47,65,200,.8);
          }
        }

      }
    }
    .fade-enter-active, .fade-leave-active {
      transition: transform .4s ease-in-out
    }
    .fade-enter, .fade-leave-active {
      transform: translate3d(0,-100%,0);
    }
  }

}
</style>